Using jQuery Mobile
For Your Next Web Application
Andy Matthews
What's this session about?
jQuery Mobile Framework
Theming
Efficiency & Workflow
Can I download your files?
Yep!
Can I tweet about this session?
Absolutely!
#usingJQM
Can I tell you
"awesome job"?
Gets you a chance to win books, and an iPod Nano
About Me
Nashville
Family
Work
I tweet
I blog
I write
jQuery Mobile Web Development Essentials
I code
github.com/commadelimited
|
|
Elevator Pitch
Why jQuery Mobile
- A touch-Optimized web framework for smartphones & tablets
- Graded browser support
- Includes UI, URL routing and theming. Built on HTML 5
- 5 themes and 24 icons built in
- Originally released in October 2010
- Current version: 1.3.1. Released on 10 April, 2013
- Next version: summer of 2013
Sponsors
Download from http://jquerymobile.com
Or use jQuery's CDN
<!-- standard include -->
<link rel="stylesheet" href="jquery.mobile-1.3.0.min.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
<!-- custom theme include -->
<link rel="stylesheet" href="jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" href="custom-theme.min.css" />
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
Initial Research
Which browsers to suppport?
Device Lab
Supported Devices
Full experience with Ajax animated transitions.
- Apple iOS 3.2*-6.1
- Android 2.1-2.3
- Android 3.2 (Honeycomb)
- Android 4.0 (ICS)
- Android 4.1 (Jelly Bean)
- Windows Phone 7.5-7.8
- Blackberry 6-10
- Blackberry Playbook(1.0-2.0)
- Palm WebOS (1.4-3.0)
- Firefox Mobile 18
- Chrome for Android 18
- Skyfire 4.1
- Opera Mobile 11.5-12
- Meego 1.2
- Tizen
- SamsungBada 2.0
- UC Browser
- Kindle 3, Fire, and Fire HD
- Nook Color 1.4.1
- Chrome Desktop
- Safari Desktop
- Firefox Desktop 10-18
- Internet Explorer 8-10
- Opera Desktop 10-12
Enhanced experience without Ajax navigation
- Blackberry 5.0*
- Opera Mini 7
- Nokia Symbian^3
- Internet Explorer 7
Basic, non-enhanced HTML experience
- Internet Explorer 6 and older
- iOS 3.x and older
- Blackberry 4.x
- Windows Mobile
- All older smartphone platforms and featurephones
can it be code time?
Open demo-01.html
Progressive enhancement
Progressive
proceeding step by step.
Enhancement
to raise to a higher degree
Incremental Improvements in Appearance
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Checkboxes, horizontal controlgroup:</legend>
<input type="ckbx" name="ckbx-6" id="ckbx-6">
<label for="ckbx-6">b</label>
<input type="ckbx" name="ckbx-7" id="ckbx-7" checked="">
<label for="ckbx-7"><em>i</em></label>
<input type="ckbx" name="ckbx-8" id="ckbx-8">
<label for="ckbx-8">u</label>
</fieldset>
Incremental Improvements in Functionality
<label for="slider">Slider:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100">
Incremental Improvements in Layout
can it be code time?
Open demo-02.html
Theming & Customization
Color Schemes & Swatches
Form Elements
Icons
The Extra Mile
Built in themes are great
At first i was like
Then i was all like
Themeroller to the rescue
And beyond...
Default icons are nice
More icons are better
Too many are never enough!
Build your own!
Custom plugins
Why write my own plugin?
- You have a need
- Learn something
- Impress your friends